<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>二手车</title>
		<link rel="stylesheet" href="../css/vant.css">
		<script src="../js/axios.min.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/vant.min.js"></script>
		<style>
			.type {
				text-align: center;
				margin: auto;
				line-height: 30px;
				width: 25%;
				height: 30px;
			}
			
			.brand {
				width: 25%;
				text-align: center;
				align-items: center;
			}

			.choice {
				padding: 0rpx 20rpx;
				display: flex;
				width: 50%;
				height: 40px;
				align-items: center;
				font-size: 30rpx;
				margin: auto;
			}

			.choice .normal {
				color: blue;
				margin: auto;
			}

			.choice .selected {
				color: red;
				margin: auto;
				border-bottom: 2px solid #E35885;
			}

			.carList {
				padding: 20px 20px 0 20px;
				display: flex;
				justify-content: space-between;
				/* background-color: #0000FF; */
			}
			.tagFirst {
				margin-left: 0;
			}
			.tagBack {
				margin-left: 10px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<!-- 导航条  -->
			<div>
				<van-nav-bar title="二手车"></van-nav-bar>
			</div>
			<!-- 类型 -->
			<ul style="display: flex;">
				<li class="type" v-for="type,index in types" v-if="index<4" v-on:click="type(index)">{{type.name}}</li>
			</ul>
			<!-- 金额 -->
			<ul style="display: flex">
				<li class="type" v-for="money,index in moneys" v-if="index<4" v-on:click="money(index)">{{money.name}}</li>
			</ul>
			<!-- 品牌 -->
			<ul style="display: flex; flex-flow: row wrap;">
				<li class="brand" v-for="brand,index in brands" v-if="index<8" v-on:click="brand(index)">
					<img style="height: 50px;" v-bind:src="brand.image" />
					<br>
					{{brand.name}}
				</li>
			</ul>
			<!-- 我要求购 -->
			<!-- <div style="padding: 0 20px;text-align: right;height: 40px;line-height: 40px;" v-on:click="buy">我要求购 ></div> -->
			<!-- 我要卖车 我的车辆 -->
			<ul style="display: flex;padding: 0 20px;height: 60px;">
				<li style="width: 45%;position:relative">
					<img style="width: 100%;height: 60px;" src="../images/icon_000.png" />
					<div style="position:absolute;width:100%;line-height:60px;z-indent:2;left:10px;top: 0;color: #FFFFFF;">我要卖车</div>
				</li>
				<li style="width: 45%;margin-left: 10%;position:relative">
					<img style="width: 100%;height: 60px;" src="../images/icon_001.png" />
					<div style="position:absolute;width:100%;line-height:60px;z-indent:2;left:10px;top: 0;color: #FFFFFF;">我的车辆</div>
				</li>
			</ul>
			<!-- 选择切换 -->
			<ul class="choice">
				<li class="normal" :class="{'selected' : 0 == switchChoice}" v-on:click="choice(0)">最新上架</li>
				<li class="normal" :class="{'selected' : 1 == switchChoice}" v-on:click="choice(1)">近期浏览</li>
			</ul>
			<!-- 列表区域 -->
			<div class="carList" v-for="item in lists">
				<div style="width: 100px;height: 100%;display: flex;">
					<img style="width: 100px;height: 100px;border-radius:10rpx;" v-bind:src="item.car_img" />
				</div>
				<div style="width: 100%;height: 100%;margin-left: 5px; align-items: center;">
					<div style="height: 25px;line-height: 25px;">{{item.car_name}}</div>
					<div style="height: 25px;line-height: 25px;">{{item.car_year}} {{item.car_drive_mode}} {{item.car_emission}} {{item.car_address}}</div>
					<div style="height: 25px;line-height: 25px;">{{item.guide_price_min}}</div>
					<div style="height: 25px;line-height: 25px;display: inline;" v-for="tag,index in item.car_tag" v-if="index < 3">
						<div style="padding-right: 10px;display: inline">
							<span style="padding: 0 5px;border: 1px solid #4CABF7;border-radius: 5px;text-align: center;color: #4CABF7;">{{tag}}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 底部高度 -->
			<div style="height: 20px;">
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					types: [{
						name: 'xx'
					}, {
						name: 'xx'
					}, {
						name: 'xx'
					}, {
						name: 'xx'
					}],
					moneys: [{
						name: 'xx'
					}, {
						name: 'xx'
					}, {
						name: 'xx'
					}, {
						name: 'xx'
					}],
					brands: [{
						name: 'tt',
						image: '../images/row.png'
					}, {
						name: 'tt',
						image: '../images/row.png'
					}, {
						name: 'tt',
						image: '../images/row.png'
					}, {
						name: 'tt',
						image: '../images/row.png'
					}],
					isScreenDataGet: false,
					screenData: {},
					opers: [{
						name: '我要买车',
						image: '../images/icon_000.png'
					}, {
						name: '我的车辆',
						image: '../images/icon_001.png'
					}],
					lists: [{
							id: 3,
							car_name: "111",
							car_tag: ['aa', 'bb'],
							car_img: '../images/row.png',
							car_drive_mode: "4x2",
							car_address: "ddd",
							car_emission: "21",
							guide_price_min: "22.00",
							created_at: '1607932709'
						}, {
							id: 3,
							car_name: "111",
							car_tag: ['cc', 'dd'],
							car_img: "../images/row.png",
							car_drive_mode: "4x2",
							car_address: "bbb",
							car_emission: "21",
							guide_price_min: "22.00",
							created_at: '1607932709'
						}, {
							id: 3,
							car_name: "111",
							car_tag: ['ee', 'ff'],
							car_img: "../images/row.png",
							car_drive_mode: "4x2",
							car_address: "ccc",
							car_emission: "21",
							guide_price_min: "22.00",
							created_at: '1607932709'
						}, {
							id: 3,
							car_name: "111",
							car_tag: ['gg', 'hh'],
							car_img: "../images/row.png",
							car_drive_mode: "4x2",
							car_address: "aaa",
							car_emission: "21",
							guide_price_min: "22.00",
							created_at: '1607932709'
						}
					],
					listData: {},
					switchChoice: 0,
					page: 1,
					ids: '',
					isLook: ''
				},
				mounted() {
					if (this.isScreenDataGet == false) {
						this.common.httpRequest(this, {
							url: '/car/saleCarHome',
							param: {},
							reciver: 'screenData'
						});
					}
					this.common.httpRequest(this, {
						url: '/car/saleCarList',
						param: {
							page: this.page,
							ids: this.ids,
							is_look: this.isLook
						},
						reciver: 'listData'
					});
				},
				methods: {
					choice: function(e) {
						this.common.print(e);
						this.switchChoice = e;
					},
					fetchData: function(e) {
						this.common.print(e);
						if (e.url == '/car/saleCarHome') {
							this.isScreenDataGet = true;
							this.types = e.data.car_type;
							this.moneys = e.data.car_money;
							this.brands = e.data.car_brand;
						} else if (e.url == '/car/saleCarList') {
							this.lists = e.data.data;
						}
					},
					type: function(e) {

					},
					money: function(e) {

					},
					brand: function(e) {

					},
					buy: function() {},
					oper: function(e) {},
					goLicheng: function(e) {
						//this.common.pushHtml('licheng');
					},

				},
				watch: {
					screenData: {
						handler: function(val, oldval) {
							this.fetchData(val);
						}
					},
					listData: {
						handler: function(val, oldval) {
							this.fetchData(val);
						}
					}
				}
			})
		</script>
	</body>

</html>
